
import React, { Component } from 'react';
import { Actions, } from 'react-native-router-flux'
import {
  StyleSheet,
  View,
  Text,
  Image
} from 'react-native';
import Colors from '../../assets/colors'

export default class Nav extends Component<{}> {
  render() {
    const {thisTitle} = this.props
    return (
      <View style={styles.container}>

        {/*<View style={styles.menuContainer}>*/}
          {/*<Image source={require('../../assets/icons/menu.png')} style={styles.menuIcon} />*/}
        {/*</View>*/}

        <View style={styles.navTitleContainer}>
          <Text style={[styles.font, styles.fontTitle]}>{thisTitle}</Text>
        </View>

        {/*<View style={styles.iconsContainer}>*/}
          {/*<View style={[styles.iconContainer, {backgroundColor: Colors.navbarSelected}]}>*/}
            {/*<Image source={require('../../assets/icons/home.png')} style={styles.icons} />*/}
            {/*<Text style={[styles.font, styles.fontText]}>首页</Text>*/}
          {/*</View>*/}
          {/*/!*<View style={styles.iconContainer}>*!/*/}
            {/*/!*<Image source={require('../../assets/icons/book.png')} style={styles.icons} />*!/*/}
            {/*/!*<Text style={[styles.font, styles.fontText]}>日常任务</Text>*!/*/}
          {/*/!*</View>*!/*/}
          {/*/!*<View style={styles.iconContainer}>*!/*/}
            {/*/!*<Image source={require('../../assets/icons/checkNote.png')} style={styles.icons} />*!/*/}
            {/*/!*<Text style={[styles.font, styles.fontText]}>现场检查</Text>*!/*/}
          {/*/!*</View>*!/*/}
        {/*</View>*/}

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    flexDirection: 'row',
    backgroundColor: Colors.navbarBackground,
    height: 80,
    display: 'flex',
  },
  font: {
    color: '#fff',
  },
  fontTitle: {
    fontSize: 26,
  },
  fontText: {
    fontSize: 17,
  },
  menuContainer: {
      width: 160,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: Colors.navbarSelected,
  },
  navTitleContainer: {
    flex: 10,
    justifyContent: 'center',
    paddingLeft: 20,
  },
  iconsContainer: {
    flex: 5,
    paddingRight: 20,
    justifyContent: 'center',
    display: 'flex',
    flexDirection: 'row',
  },
  iconContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  menuIcon: {
    width: 45,
    height: 45,
  },
  icons: {
    width: 30,
    height: 30,
    marginBottom: 3,
  }
});